<template>
  <div class="person-container">
    <el-tabs v-if="validateForm" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="乡镇街道意见" name="xz">
        <el-form label-position="top" class="cs-box" label-width="80px">
          <el-form-item label="1.申请人信息是否属实？">
            <el-radio-group :value="validateForm.option1Audit">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
            <el-input v-if="validateForm.option1Audit == 'NO'" readonly :value="validateForm.option1Explain"></el-input>
          </el-form-item>
          <el-form-item label="2.代表人信息是否属实？">
            <el-radio-group :value="validateForm.option2Audit">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
            <el-input v-if="validateForm.option2Audit == 'NO'" readonly :value="validateForm.option2Explain"></el-input>
          </el-form-item>
          <el-form-item label="3.土地权属关系是否真实有效？">
            <el-radio-group :value="validateForm.option3Audit">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
            <el-input v-if="validateForm.option3Audit == 'NO'" readonly :value="validateForm.option3Explain"></el-input>
          </el-form-item>
          <el-form-item label="4.申请资料要件是否齐全？">
            <el-radio-group :value="validateForm.option4Audit">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
            <el-input v-if="validateForm.option4Audit == 'NO'" readonly :value="validateForm.option4Explain"></el-input>
          </el-form-item>
          <el-form-item label="5.申请复垦的宅基地是否在城镇扩展边界之外？">
            <el-radio-group :value="validateForm.option5Audit">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
            <el-input v-if="validateForm.option5Audit == 'NO'" readonly :value="validateForm.option5Explain"></el-input>
          </el-form-item>
          <el-form-item label="6.申请人填写信息是否完整规范准确？">
            <el-radio-group :value="validateForm.option6Audit">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
            <el-input v-if="validateForm.option6Audit == 'NO'" readonly :value="validateForm.option6Explain"></el-input>
          </el-form-item>
          <div class="layout-box">
            <span class="title">乡镇经过审查</span>
            <el-checkbox class="ty" v-model="ty">同意上报</el-checkbox>
            <el-divider></el-divider>
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="审核人姓名：">
                <el-input readonly :value="validateForm.auditUser.name"></el-input>
              </el-form-item>
              <el-form-item label="审核人职务：">
                <el-input readonly :value="validateForm.auditUser.position"></el-input>
              </el-form-item>
              <el-form-item label="联系电话：">
                <el-input readonly :value="validateForm.auditUser.mobilePhone"></el-input>
              </el-form-item>
              <el-form-item label="审核日期：">
                <el-input readonly :value="validateForm.auditTime"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div v-else class="no-data">— 暂无数据 —</div>
  </div>
</template>

<script>
import { queryApplyDetailById } from "@/api/project/fksqtc/groupApplyCheck";

export default {
  data() {
    return {
      activeName: "xz",
      validateForm: null,
      ty: true
    };
  },
  created() {
    this.param = this.$route.query;
    this.handleDetail();
  },
  methods: {
    handleDetail() {
      queryApplyDetailById({
        landId: this.param.id
      }).then(res => {
        this.validateForm = res.data.collectiveLandTownAudit;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.person-container {
  padding: 30px;
  .layout-box {
    margin-top: 30px;
    .title {
      width: 140px;
      height: 20px;
      font-size: 18px;
      color: rgba(72, 73, 77, 1);
      line-height: 20px;
      font-weight: bold;
    }
    .ty {
      margin-left: 40px;
    }
  }
}
.no-data{
  text-align: center;
  color: #909399;
  font-size: 14px;
  margin-top: 20px;
}
</style>
<style lang="scss" scoped>
/deep/ .el-tabs__item {
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  font-weight: bold;
}
.cs-box {
  /deep/ .el-input__inner {
    width: 390px;
  }
  .layout-box {
    /deep/ .el-input__inner {
      width: 180px;
    }
  }
}
</style>
